<template>
<div class='right-center-top' ref="rightCenterTop">
	<ul class="cube-list">
		<li class="cube-item" :class="[`cube-item${index}`]"
			v-for="(cube, index) in accessData"
			:key="index">
			<cube :cubeData='cube'
				:hoz='["数据治理量"].includes(cube.name)?true:false'
				:ref="`cube${index}`"></cube>
		</li>
	</ul>   
	<img src="../../../assets/imgs/left/bottomBg.png" class="bt-bg" ref="btBg">
</div>
</template>

<script>
import { mapState } from 'vuex'
import Cube from '@/components/common/cube.vue'
export default {
components: {
	Cube
},
data() {
return {}
},
created() {
},
mounted() {},
computed: {
  ...mapState(['dataSet']),
  accessData() {
    if(this.dataSet.rightCenterTop){
      return this.dataSet.rightCenterTop.accessData
    } else {
      return []
    }
  }
},
watch: {},
methods: {
	init() {
		let tl = new TimelineMax({})
		let tw0 = TweenMax.from(this.$refs.rightCenterTop, .3, {opacity: 0,scaleY:0})
		tl.addLabel('start')
			.add(tw0,'start')
		//   .add(this.$refs.rightCenterTopItem.init(),'start+=0.2')
		for (let i = 0; i < this.accessData.length; i++) {
			tl.add(this.$refs[`cube${i}`][0].init(), '-=0.5')
		}
		let tw1 = TweenMax.from(this.$refs.btBg, .3, {opacity: 0})
		tl.add(tw1,'start+=2')
		return tl
	}
},
}
</script>
<style lang='scss' scoped>
  .right-center-top {
		background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(3,94,240,0.1) 100%);
		width: 100%;
		height: 206px;
		padding: 20px 10px 0 26px;
		.cube-list {
			display: grid;
			grid-template-columns: 50% 50%;
			grid-template-rows: repeat(3, 44px);
			// grid-auto-flow: column;
			grid-row-gap: 12px;
		}
		.cube-item0 {
			grid-column-start: span 2;
		}
		.bt-bg {
			margin-top: 18px;
			margin-left: -25px;
		}
	}
</style>